<html>
<head>
	<title>天天娱乐</title>
	<meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
</head>
	<link rel="stylesheet" type="text/css" href="plugin/ionic/css/ionic.min.css">
	<link rel="stylesheet" type="text/css" href="src/css/comment.css">
	<link rel="stylesheet" type="text/css" href="src/css/index.css">

	<script type="text/javascript" src="plugin/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="plugin/ionic/js/ionic.bundle.min.js"></script>
	<script type="text/javascript" src="src/js/comment.js"></script>
	<script type="text/javascript" src="src/js/index.js"></script>
<body ng-app="music" ng-controller="music_con">

	<!-- head -->
	<ion-header-bar align-title="center" class="bar-positive">
	  <button class="button button-icon icon ion-navicon" ng-click="toggleLeft()"></button>
	  <div class="h1 title" >天天娱乐</div>
	  <button class="button button-icon ion-android-search" ng-click='mysearch()' style="float: right"></button>
	</ion-header-bar>
	<div class="bar bar-subheader" style="margin:0;padding: 0">
	  	<div class="button-bar">
		  <a class="button active" ng-click='changeCurChannel($event)'>音乐</a>
		  <a class="button" ng-click='changeCurChannel($event)'>段子</a>
		  <a class="button" ng-click='changeCurChannel($event)'>图片</a>
		  <a class="button" ng-click='changeCurChannel($event)'>视频</a>
		</div>
	 </div>

  
	<!-- content -->
	<ion-side-menus>
		<!-- 左侧栏 -->
		<ion-side-menu side="left">
			<div class="user"></div>
				<div class="list" >
				  <a class="item item-icon-left" href="#">
				    <i class="icon ion-email"></i>
				    Check mail
				  </a>

				  <a class="item item-icon-left item-icon-right" href="#">
				    <i class="icon ion-chatbubble-working"></i>
				    Call Ma
				    <i class="icon ion-ios-telephone-outline"></i>
				  </a>

				  <a class="item item-icon-left" href="#">
				    <i class="icon ion-mic-a"></i>
				    Record album
				    <span class="item-note">
				      Grammy
				    </span>
				  </a>

				  <a class="item item-icon-left" href="#">
				    <i class="icon ion-person-stalker"></i>
				    Friends
				    <span class="badge badge-assertive">0</span>
				  </a>
				</div>
			<div class="heihei"></div>
  		</ion-side-menu>

  		<!-- 内容栏 -->
		<ion-side-menu-content>
		 <div class="allslide">
		<!-- 音乐列表 -->
		  <div class="baseSide">
			<div id="musicDiv" class="list myscroll">
			    <a href="#" ng-repeat="x in data" init="x.play=false" class="item item-avatar {{x.play?'active':''}}" ng-click="playCur($index,x)">
			      <img src={{x.image3?x.image3:x.image0}}>
			      <h2>{{x.name}}</h2>
			      <p>{{x.text}}</p>
			    </a>
	      	</div>  
	      </div>

		 <!-- 段子 -->
		  <div class="baseSide" ng-controller="programme" >
		  	<div class="myscroll">
				<div class="list card " ng-repeat="x in data">
				  <div class="item item-avatar">
				    <img src='{{x.profile_image}}'>
				    <h2>{{x.name}}</h2>
				    <p>{{x.create_time}}</p>
				  </div>
				  <div class="item item-body">
				    <p>{{x.text}}</p>
				    <p>
				      <i class='icon ion-thumbsup'>{{x.love}}</i>
				      <i class='icon ion-thumbsdown'>{{x.hate}}</i>
				    </p>
				  </div>
				</div>
			</div>
		  </div>

		<!-- 图片 -->
		  <div class="baseSide">
		    <div id="img_" class="list myscroll" ng-controller="image" style="padding:10px;">
			  	 <a class="item item-thumbnail-left" href="#" ng-repeat="x in data" ng-click="showImgDetail(x)">
			      <img src='{{x.profile_image}}'>
			      <h2>{{x.name}}</h2>
			      <p>{{x.text}}</p>
			      <i class='icon ion-heart'>{{x.love}}</i>
			      <i class='icon ion-heart-broken'>{{x.hate}}</i>
			    </a>
		    </div>
		  </div>

		<!-- 视频 -->
		  <div class="baseSide" style="position: absolute">
		    <div id='verdio' class="verdio myscroll" ng-controller="video">
		    	<div class="verdio_box" ng-repeat="x in data" ng-click="showVerdioDetail(x)">
					<img src="{{x.profile_image}}">
					<p>{{x.name}}</p>
					<p>{{x.text}}</p>
					<i class='icon ion-heart'>{{x.love}}</i>
			      	<i class='icon ion-heart-broken'>{{x.hate}}</i>
		    	</div>
		    </div>
		  </div>
		 </div>
		</ion-side-menu-content>
	</ion-side-menus>

	<!-- audio -->
	<audio id="ado" autoplay="autoplay" ng-show='music_chonnel'>
		<source src="">
	</audio>
	
	<!-- fooster -->
	<!-- 播放器 -->
	<ion-footer-bar align-title="left" class="bar-assertive" ng-if='music_chonnel'>
		<div id="broadcast" ng-click="operate($event)">
			<div id="banner"><img src="{{cur_image}}"></div>
			<!-- <div id="progress"><div class="pro_ing"></div><div class="pro_bar"></div></div> -->
			<div id="progress"><input type="range"></div>
			<span id="song_name">{{cur_name}}</span>
			<div id="operation">
				<div id="back" class="icon ion-ios-rewind"></div>
				<div id="pause" class="icon ion-ios-{{pause?'pause':'play'}}"></div>
				<div id="forward" class="icon ion-ios-fastforward"></div>
			</div>
			<div class="icon ion-volume-medium" id="volumn" >
				<input type="range">
			</div>
		</div>
	</ion-footer-bar>
	<!-- 页脚 -->
	<div class="tabs tabs-icon-top" ng-if='!music_chonnel'>
	  <a class="tab-item" href="index.html">
	    <i class="icon ion-home"></i>
	    主页
	  </a>
	  <a class="tab-item">
	    <i class="icon ion-star"></i>
	    收藏
	  </a>
	  <a class="tab-item">
	    <i class="icon ion-gear-a"></i>
	    设置
	  </a>
	</div>


	<!-- 搜索 -->
	<div class="search" ng-if='search'>
		<div class="bar bar-header item-input-inset">
		  <label class="item-input-wrapper">
		    <i class="icon ion-ios-search placeholder-icon"></i>
		    <input type="search" placeholder="Search">
		  </label>
		  <button class="button button-clear" ng-click='mysearch()' >
		    Cancel
		  </button>
		</div>
	</div>

</body>
</html>
 <script type="text/javascript">
// window.ready = function(fn){
//     if(document.addEventListener) {
//         document.addEventListener('DOMContentLoaded', function() {
//             //注销事件, 避免反复触发
//             document.removeEventListener('DOMContentLoaded',arguments.callee, false);
//             fn();            //执行函数
//         }, false);
//     }else if(document.attachEvent) {        //IE
//         document.attachEvent('onreadystatechange', function() {
//             if(document.readyState == 'complete') {
//                 document.detachEvent('onreadystatechange', arguments.callee);
//                 fn();        //函数执行
//             }
//         });
//     }
// };

// window.ready(function () {

//     var touches = {
//         startX: 0,
//         startY: 0,
//         endX: 0,
//         endY: 0,
//         moveLength: 0,//从 startX 到 endX 的长度
//         lastMoveLength: 0, // 上一次的移动长度
//         baseLength: document.documentElement.clientWidth
//     };

//     var dkBody = document.getElementsByClassName('allslide')[0];
//     var baseSlide = dkBody.getElementsByClassName('baseSide');
   
//     dkBody.style.width = touches.baseLength * baseSlide.length + 'px';
//     dkBody.style.height = document.documentElement.clientHeight + 'px';
//     for (var i = 0; i < baseSlide.length; i++) {
//         baseSlide[i].style.width = touches.baseLength + 'px';
//         baseSlide[i].style.left = i * touches.baseLength + 'px';
//     }

//     dkBody.addEventListener('touchstart', onTouchStart, false);

//     function onTouchStart(e) {
//         console.log(e);
//         if (e.touches.length == 1) {
//             touches.startX = e.touches[0].pageX;
//             touches.startY = e.touches[0].pageY;
//             dkBody.addEventListener('touchmove', onTouchMove, false);
//         }
//     }

//     function onTouchMove(e) {
//         touches.endX = e.touches[0].pageX;
//         touches.endY = e.touches[0].pageY;
//         dkBody.addEventListener('touchend', onTouchEnd, false);
//         touches.moveLength = touches.startX - touches.endX;
//         dkBody.style.transform = "translate3d(" + (touches.moveLength * -0.7 + touches.lastMoveLength) + "px,0,0)";
//     }

//     function onTouchEnd(e) {
//         dkBody.removeEventListener('touchmove', ontouchmove);
//         dkBody.removeEventListener('touchend', onTouchEnd);
//         if (Math.abs(touches.moveLength) > touches.baseLength / 2) {
//             //向右边滑动
//             if (touches.moveLength < 0) {
//                 if (touches.lastMoveLength == 0) {
//                     dkBody.style.transform = "translate3d(0,0,0)";
//                 } else {
//                     touches.lastMoveLength += touches.baseLength;
//                     dkBody.style.transform = "translate3d(" + touches.lastMoveLength + "px,0,0)";
//                 }
//             } else {//向左边滑动
//                 if (Math.abs(touches.lastMoveLength) == (baseSlide.length - 1) * touches.baseLength) {
//                     dkBody.style.transform = "translate3d(" + touches.lastMoveLength + "px,0,0)";
//                 } else {
//                     touches.lastMoveLength += touches.baseLength * -1;
//                     dkBody.style.transform = "translate3d(" + touches.lastMoveLength + "px,0,0)";
//                 }
//             }
//         } else {
//             dkBody.style.transform = "translate3d(" + touches.lastMoveLength + "px,0,0)";
//         }
//         //console.log(touches);
//     }
// })
 </script>